import React, { Component } from 'react'
import wz1 from '../../assets/img/wz1.png'
import { getSmsCode, login } from '../../api/user';
import { connect } from 'react-redux';
import { loginAction } from '../../store/actions/user'
import './index.css'
import Captcha from '../../components/MyCapCha';
import {
    Form,
    Input,
    Button,
    Toast, Mask
} from 'antd-mobile'
class Login extends Component {
    constructor() {
        super();
        this.state = {
            phone: "",
            smsCode: "",
            smsCode1: "",
            disabled: true,
            btnText: "获取验证码",
            visible: false,
            inputCaptcha: "",
            captcha: ''
        }
        this.timer = null;
    }
    setVisible = (data) => {
        this.setState({
            visible: data
        })
    }
    changeInput = (type, val) => {
        console.log(type, val);
        this.setState({
            [type]: val
        })
        if (type === 'phone') {
            const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
            if (reg.test(val)) {
                this.setState({ disabled: false })
            } else {
                this.setState({ disabled: true })
            }
        }
        else if (type === 'smsCode') {
            if (val.length === 4) {
                console.log(val, this.state.smsCode1);
                if (parseInt(val) === this.state.smsCode1) {
                    console.log("loginsuccess");
                    this.loginFn();
                }
                else {
                    Toast.show({
                        icon: 'fail',
                        content: "验证码错误！"
                    })
                }
            }
        }
    }
    loginFn = () => {
        const { phone, smsCode1 } = this.state;
        login(phone, smsCode1).then(res => {
            if (res.data.code === 666) {
                console.log(res);
                //将用户信息和token保存到 redux
                this.props.loginAction(res.data.result);
                //页面跳转
                this.props.history.push('/');
            }
        })
    }
    getSmsCode = () => {
        Toast.show({
            content: '验证码已发送，请注意查收',
        })
        this.setVisible(false);
        this.setState({ disabled: true })
        let num = 60;
        this.timer = setInterval(() => {
            num--;
            this.setState({ btnText: `重新获取(${num})` });
            if (num <= 0) {
                clearInterval(this.timer);
                this.setState({ btnText: "重新获取", disabled: false })
            }
        }, 1000)
        getSmsCode(this.state.phone).then(res => {
            console.log(res);
            if (res.data.code === 666) {
                this.setState({
                    smsCode1: res.data.smsCode
                })
            }
        })
    }
    // 接收验证码
    handleClickCaptcha(data) {
        this.setState({
            captcha: data,
        })
    }
    changeInputCaptchaCode = (ev) => {
        this.setState({
            inputCaptcha: ev.target.value
        })
        if (ev.target.value.length === 4) {
            if (ev.target.value === this.state.captcha) {
                this.getSmsCode();
            }
            else {
                Toast.show({
                    icon: 'fail',
                    content: "图形码错误！"
                })
            }
        }
    }
    render() {
        let { phone, smsCode, disabled, btnText, visible, inputCaptcha } = this.state;
        return (<div className='login'>

            <div className="img-wz"><img src={wz1} alt="" /></div>
            <div className="con">
                <Form
                    layout='horizontal'
                    footer={
                        <Button block type='submit' color='primary' size='large' onClick={() => { this.setVisible(true); }} disabled={disabled}
                            style={{ background: disabled ? '#f5f5f5' : 'linear-gradient(90deg, #ff5c41, #ff1b50)', color: disabled ? '#999' : '#fff' }}>
                            {btnText}
                        </Button>
                    }
                >

                    <Form.Item
                        name='phone'
                        rules={[{ required: true, message: '手机号不能为空' }]}
                    >
                        <Input onChange={(val) => { this.changeInput('phone', val) }} placeholder='请输入手机号' value={phone} />
                    </Form.Item>
                    <Form.Item name='smsCode'
                        rules={[{ required: true, message: '验证码不能为空' }]}
                    >
                        <Input onChange={(val) => { this.changeInput('smsCode', val) }} placeholder='请输入验证码' value={smsCode} />
                    </Form.Item>
                </Form>
                <Mask visible={visible} onMaskClick={() => this.setVisible(false)}>
                    <div className='overlayContent'>
                        <div className='copywriting'>图形验证码</div>
                        <div className='captchaCode-wrap'>
                            <input type="text" placeholder='请输入图形码' className='captchaCode-input' value={inputCaptcha} onChange={this.changeInputCaptchaCode}></input>
                            <Captcha handleClickCaptcha={this.handleClickCaptcha.bind(this)} />
                        </div>

                    </div>
                </Mask>
                {/* <div className="tel">
                    <input type="text" placeholder="请输入手机号" id="tel" />
                </div>
                <div className="num">
                    <input type="text" placeholder="请输入验证码" id="num" />
                    <button>获取验证码</button>
                </div> */}
            </div>
        </div>)
    }
}
export default connect(
    state => ({ user: state.user }), {
    loginAction
}
)(Login);